<template>
    <i class="fdx-icon-switch" @click="onSwitch" :class="{'active':value}">
        <span class="text">{{value?checkedText:uncheckedText}}</span>
    </i>
</template>
<script>
/**
 * mt-switch
 * @module components/switch
 * @desc 切换按钮
 * @param {boolean} [value] - 绑定值，支持双向绑定
 * @param {slot} - 显示内容
 *
 * @example
 * <mt-switch v-model="value"></mt-switch>
 */
export default {
    name: 'mt-switch',

    props: {
        value: Boolean,
        disabled: {
            type: Boolean,
            default: false
        },
        checkedText: {
            type: String,
            default: ''
        },
        uncheckedText: {
            type: String,
            default: ''
        }
    },
    computed: {
        currentValue: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            }
        }
    },
    methods: {
        onSwitch() {
            this.currentValue = !this.value
            this.$emit('change')
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../assets/sass/vars';
@import '../../assets/sass/mixins';
.fdx-icon-switch {
    height: 20px;
    padding: 0 6px 0 20px;
    line-height: 20px;
    min-width: 44px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background-color: #ccc;
    border-radius: 15px;
    overflow: hidden;
    z-index: 1;
    background-color: #ccc;
    .text {
        position: relative;
        z-index: 100;
        font-size: 10px;
        font-style: normal;
        color: #fff;
    }
    &:after {
        content: '';
        height: 16px;
        width: 16px;
        background-color: #fff;
        border-radius: 15px;
        position: absolute;
        left: 2px;
        top: 2px;
        transition: left 0.2s;
        z-index: 3;
    }
    &.active {
        padding: 0 20px 0 6px;
        background-color: #18cbf2;
        &:after {
            left: calc(100% - 18px);
        }
    }
}
</style>
